<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- <div>
				n 的值：<span>{{n}}</span>
			</div> -->
			<div>
				n 放大10倍：<span v-big="n"></span>
			</div>
			<button @click="n = n + 1">将n加1</button>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					n: 1
				},
				// 自定义指令 
				directives: {
					// 函数形式
					big(element,binding){
						// 此时函数内this对象不再是vue实例对象
						console.log('this:',this)
						// 当改指令绑定的元素所在的vue模板被更新时就会调用这个函数
						console.log('v-big指令被调用了！')
						// element 参数为与该指令绑定的元素，
						console.log('element参数：',element)
						// element 是一个真实的DOM元素
						console.dir(element) // 拥有真实DOM元素的所有属性和方法
						console.log(element instanceof HTMLElement) // true
						// binding 为绑定对象，该对象中有一个value属性，就是该指令绑定的值
						console.log('binding参数：',binding)
						// 将n的值放大十倍，替换到对应标签内
						element.innerText = binding.value * 10;
					}
				}
			})
		</script>
	</body>
</html>